<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .description {
            text-align: center;
            margin-bottom: 20px;
            color: #7f8c8d;
            font-size: 16px;
        }

        .search-section {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 20px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 6px;
        }

        .search-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
        }

        .search-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        label {
            font-weight: bold;
            color: #34495e;
            min-width: 80px;
        }

        input,
        select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            flex: 1;
            min-width: 150px;
        }

        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background-color: #3498db;
            color: white;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #2980b9;
        }

        .employee-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .employee-card {
            border: 1px solid #ddd;
            border-radius: 6px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .employee-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .employee-header {
            padding: 15px;
            background-color: #3498db;
            color: white;
        }

        .employee-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .employee-position {
            font-size: 14px;
            opacity: 0.9;
        }

        .employee-info {
            padding: 15px;
        }

        .info-item {
            margin-bottom: 10px;
            display: flex;
        }

        .info-label {
            font-weight: bold;
            width: 100px;
            color: #7f8c8d;
        }

        .info-value {
            flex: 1;
        }

        .employee-footer {
            padding: 10px 15px;
            background-color: #f8f9fa;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #ddd;
        }

        .status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }

        .status-active {
            background-color: #2ecc71;
            color: white;
        }

        .status-inactive {
            background-color: #e74c3c;
            color: white;
        }

        .status-vacation {
            background-color: #f39c12;
            color: white;
        }

        .no-results {
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
            font-style: italic;
            background-color: #f8f9fa;
            border-radius: 6px;
            grid-column: 1 / -1;
        }

        .search-results {
            margin-top: 20px;
        }

        .search-results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        .results-count {
            font-size: 16px;
            color: #7f8c8d;
        }

        .clear-search {
            background-color: #95a5a6;
        }

        .clear-search:hover {
            background-color: #7f8c8d;
        }

        .highlight {
            background-color: #ffffcc;
            padding: 2px;
            border-radius: 2px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>员工管理系统</h1>
        <p class="description">基于findKey方法的高效员工信息查询系统</p>

        <div class="search-section">
            <div class="search-row">
                <div class="search-group">
                    <label for="searchField">查询字段:</label>
                    <select id="searchField">
                        <option value="name">姓名</option>
                        <option value="department">部门</option>
                        <option value="position">职位</option>
                        <option value="salary">薪资</option>
                        <option value="status">状态</option>
                    </select>
                </div>

                <div class="search-group">
                    <label for="searchCondition">查询条件:</label>
                    <select id="searchCondition">
                        <option value="equals">等于</option>
                        <option value="contains">包含</option>
                        <option value="greater">大于</option>
                        <option value="less">小于</option>
                    </select>
                </div>

                <div class="search-group">
                    <label for="searchValue">查询值:</label>
                    <input type="text" id="searchValue" placeholder="输入查询值">
                </div>

                <button id="searchBtn">查询</button>
                <button id="clearBtn" class="clear-search">清除</button>
            </div>
        </div>

        <div class="search-results">
            <div class="search-results-header">
                <div class="results-count" id="resultsCount">显示全部员工 (10)</div>
            </div>

            <div class="employee-cards" id="employeeCards">
                <!-- 员工卡片将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <script>
        // 核心函数：findKey - 在对象中查找满足条件的键
        const findKey = (obj, handler) =>
            Object.keys(obj).find(key => handler(obj[key], key, obj));

        // 员工数据
        const employees = {
            'emp001': {
                id: 'emp001',
                name: '张伟',
                age: 32,
                gender: '男',
                department: '技术部',
                position: '高级前端工程师',
                salary: 18000,
                hireDate: '2019-05-15',
                status: 'active',
                email: 'zhangwei@example.com',
                phone: '13812345678'
            },
            'emp002': {
                id: 'emp002',
                name: '李娜',
                age: 28,
                gender: '女',
                department: '市场部',
                position: '市场经理',
                salary: 15000,
                hireDate: '2020-03-10',
                status: 'active',
                email: 'lina@example.com',
                phone: '13987654321'
            },
            'emp003': {
                id: 'emp003',
                name: '王强',
                age: 35,
                gender: '男',
                department: '人力资源部',
                position: 'HR主管',
                salary: 12000,
                hireDate: '2018-11-22',
                status: 'vacation',
                email: 'wangqiang@example.com',
                phone: '13567891234'
            },
            'emp004': {
                id: 'emp004',
                name: '赵敏',
                age: 26,
                gender: '女',
                department: '技术部',
                position: 'UI设计师',
                salary: 10000,
                hireDate: '2021-01-05',
                status: 'active',
                email: 'zhaomin@example.com',
                phone: '13612378945'
            },
            'emp005': {
                id: 'emp005',
                name: '刘洋',
                age: 40,
                gender: '男',
                department: '财务部',
                position: '财务总监',
                salary: 25000,
                hireDate: '2017-08-18',
                status: 'active',
                email: 'liuyang@example.com',
                phone: '13398765432'
            },
            'emp006': {
                id: 'emp006',
                name: '陈静',
                age: 31,
                gender: '女',
                department: '销售部',
                position: '销售代表',
                salary: 9000,
                hireDate: '2020-07-12',
                status: 'inactive',
                email: 'chenjing@example.com',
                phone: '13245678901'
            },
            'emp007': {
                id: 'emp007',
                name: '杨光',
                age: 29,
                gender: '男',
                department: '技术部',
                position: '后端工程师',
                salary: 16000,
                hireDate: '2019-10-25',
                status: 'active',
                email: 'yangguang@example.com',
                phone: '13876543210'
            },
            'emp008': {
                id: 'emp008',
                name: '周丽',
                age: 33,
                gender: '女',
                department: '市场部',
                position: '市场专员',
                salary: 11000,
                hireDate: '2020-05-08',
                status: 'active',
                email: 'zhouli@example.com',
                phone: '13698765432'
            },
            'emp009': {
                id: 'emp009',
                name: '吴刚',
                age: 38,
                gender: '男',
                department: '研发部',
                position: '研发经理',
                salary: 22000,
                hireDate: '2018-03-15',
                status: 'vacation',
                email: 'wugang@example.com',
                phone: '13587654321'
            },
            'emp010': {
                id: 'emp010',
                name: '郑红',
                age: 27,
                gender: '女',
                department: '客服部',
                position: '客服主管',
                salary: 9500,
                hireDate: '2021-02-20',
                status: 'active',
                email: 'zhenghong@example.com',
                phone: '13912345678'
            }
        };

        // DOM元素
        const searchFieldSelect = document.getElementById('searchField');
        const searchConditionSelect = document.getElementById('searchCondition');
        const searchValueInput = document.getElementById('searchValue');
        const searchBtn = document.getElementById('searchBtn');
        const clearBtn = document.getElementById('clearBtn');
        const resultsCountDiv = document.getElementById('resultsCount');
        const employeeCardsDiv = document.getElementById('employeeCards');

        // 根据状态获取对应的CSS类和显示文本
        function getStatusInfo(status) {
            switch (status) {
                case 'active':
                    return { class: 'status-active', text: '在职' };
                case 'inactive':
                    return { class: 'status-inactive', text: '离职' };
                case 'vacation':
                    return { class: 'status-vacation', text: '休假' };
                default:
                    return { class: '', text: status };
            }
        }

        // 创建员工卡片
        function createEmployeeCard(employee) {
            const card = document.createElement('div');
            card.className = 'employee-card';

            const statusInfo = getStatusInfo(employee.status);

            card.innerHTML = `
                <div class="employee-header">
                    <div class="employee-name">${employee.name}</div>
                    <div class="employee-position">${employee.position}</div>
                </div>
                <div class="employee-info">
                    <div class="info-item">
                        <div class="info-label">部门:</div>
                        <div class="info-value">${employee.department}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">年龄:</div>
                        <div class="info-value">${employee.age}岁</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">性别:</div>
                        <div class="info-value">${employee.gender}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">薪资:</div>
                        <div class="info-value">¥${employee.salary}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">入职日期:</div>
                        <div class="info-value">${employee.hireDate}</div>
                    </div>
                </div>
                <div class="employee-footer">
                    <div class="employee-contact">${employee.email}</div>
                    <div class="status ${statusInfo.class}">${statusInfo.text}</div>
                </div>
            `;

            return card;
        }

        // 显示所有员工
        function displayAllEmployees() {
            employeeCardsDiv.innerHTML = '';
            const employeeIds = Object.keys(employees);

            if (employeeIds.length === 0) {
                employeeCardsDiv.innerHTML = '<div class="no-results">没有员工数据</div>';
                return;
            }

            employeeIds.forEach(id => {
                const employeeCard = createEmployeeCard(employees[id]);
                employeeCardsDiv.appendChild(employeeCard);
            });

            resultsCountDiv.textContent = `显示全部员工 (${employeeIds.length})`;
        }

        // 搜索员工
        function searchEmployees() {
            const field = searchFieldSelect.value;
            const condition = searchConditionSelect.value;
            const value = searchValueInput.value.trim();

            if (!value) {
                displayAllEmployees();
                return;
            }

            // 使用findKey函数查找符合条件的员工
            let matchedEmployeeIds = [];

            // 根据不同的查询条件构建不同的匹配函数
            let matchFunction;

            switch (condition) {
                case 'equals':
                    if (field === 'salary') {
                        const numValue = parseFloat(value);
                        matchFunction = employee => employee[field] === numValue;
                    } else {
                        matchFunction = employee => employee[field] === value;
                    }
                    break;

                case 'contains':
                    matchFunction = employee => {
                        if (typeof employee[field] === 'string') {
                            return employee[field].includes(value);
                        }
                        return false;
                    };
                    break;

                case 'greater':
                    const greaterValue = parseFloat(value);
                    matchFunction = employee => {
                        if (typeof employee[field] === 'number') {
                            return employee[field] > greaterValue;
                        }
                        return false;
                    };
                    break;

                case 'less':
                    const lessValue = parseFloat(value);
                    matchFunction = employee => {
                        if (typeof employee[field] === 'number') {
                            return employee[field] < lessValue;
                        }
                        return false;
                    };
                    break;
            }

            // 使用findKey查找所有匹配的员工ID
            while (true) {
                const foundKey = findKey(employees, matchFunction);
                if (!foundKey || matchedEmployeeIds.includes(foundKey)) {
                    break;
                }
                matchedEmployeeIds.push(foundKey);

                // 临时从搜索范围中移除已找到的员工，以便继续查找下一个
                const tempEmployees = { ...employees };
                matchedEmployeeIds.forEach(id => delete tempEmployees[id]);

                // 如果没有更多员工可搜索，退出循环
                if (Object.keys(tempEmployees).length === 0) {
                    break;
                }
            }

            // 显示搜索结果
            employeeCardsDiv.innerHTML = '';

            if (matchedEmployeeIds.length === 0) {
                employeeCardsDiv.innerHTML = '<div class="no-results">没有找到符合条件的员工</div>';
                resultsCountDiv.textContent = `没有找到符合条件的员工`;
                return;
            }

            matchedEmployeeIds.forEach(id => {
                const employeeCard = createEmployeeCard(employees[id]);
                employeeCardsDiv.appendChild(employeeCard);
            });

            resultsCountDiv.textContent = `找到 ${matchedEmployeeIds.length} 个符合条件的员工`;
        }

        // 事件监听
        searchBtn.addEventListener('click', searchEmployees);

        clearBtn.addEventListener('click', () => {
            searchFieldSelect.value = 'name';
            searchConditionSelect.value = 'equals';
            searchValueInput.value = '';
            displayAllEmployees();
        });

        // 初始加载显示所有员工
        window.addEventListener('load', displayAllEmployees);

        // 根据选择的字段更新条件选择器选项
        searchFieldSelect.addEventListener('change', () => {
            const field = searchFieldSelect.value;

            // 清空现有选项
            searchConditionSelect.innerHTML = '';

            // 添加通用选项
            const equalsOption = document.createElement('option');
            equalsOption.value = 'equals';
            equalsOption.textContent = '等于';
            searchConditionSelect.appendChild(equalsOption);

            // 根据字段类型添加特定选项
            if (field === 'name' || field === 'department' || field === 'position') {
                const containsOption = document.createElement('option');
                containsOption.value = 'contains';
                containsOption.textContent = '包含';
                searchConditionSelect.appendChild(containsOption);
            }

            if (field === 'salary' || field === 'age') {
                const greaterOption = document.createElement('option');
                greaterOption.value = 'greater';
                greaterOption.textContent = '大于';
                searchConditionSelect.appendChild(greaterOption);

                const lessOption = document.createElement('option');
                lessOption.value = 'less';
                lessOption.textContent = '小于';
                searchConditionSelect.appendChild(lessOption);
            }
        });
    </script>
</body>

</html>